<style lang="scss" scoped>
    @import '../../css/base-color.scss';
    .header-box{width: 100%;background: #fff;}
    .header{max-width: 1200px;margin:0 auto;background: $mc2;}
    .header-left{height:50px;}
    .logo-img{width: 60px;height:50px;vertical-align: middle;display: inline-block;}
    .backstage{height:50px;line-height: 50px;text-align: left;display: inline-block}
    .lr-btn{height:50px;line-height:50px; cursor: pointer;}
    .lr-btn span{width: 100px;height:30px;text-align: center;line-height: 30px;background: blue;color:#fff;border-radius: 2px;display: inline-block;}

    .login-box{width: 100%;background: #fff;}
    .login{max-width: 1200px;margin:0 auto;height:700px;background: url('../../images/main-bg.png') no-repeat 0 0;}

    .lb-right{right:60px;top:100px;background: #fff;width: 400px;height: 400px;}
    .el-tab-pane{width: 50%;}

    .item-box{width: 100%;}
    .input{width:200px;}

    .out-box{width: 100%;height:100%;}
    .popup-box{width: 100%;height:100%;top:0;left: 0;background: black;opacity: 0.5;display: flex;align-items: center;justify-content: center;}
    .pop-up{width: 500px;height:400px;margin: 0 auto;background: #fff;text-align: center;}
</style>

<template>

    <section class="p-relative out-box">

        <section class="header-box">
            <section class="header clearfix">
                <div class="header-left fl">
                   <img class="logo-img" src="https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=9f10ecef5b0fd9f9b41a5d3b4444bf4f/0df431adcbef76093fde5a0c24dda3cc7dd99e48.jpg" alt="">
                    <span class="fs-16 backstage">钱橙后台管理后台</span>
                </div>
                <div class="fr lr-btn fs-16" @click="goto('register/add-phone')"><span>企业注册</span></div>
            </section>
        </section>

        <section class="login-box">
            <section class="login p-relative">

                <section class="lb-right p-absolute">

                    <template>
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="扫码登录" name="first" @click="codeClick">com/member/getLoginConfig
                                <div id="login_container">

                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="账号登录" name="second" @click="loginClick">

                                <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
                                    <el-form-item label="账号" prop="mobile">
                                        <el-input class="input" v-model="ruleForm.mobile" placeholder="手机号"></el-input>
                                    </el-form-item>
                                    <el-form-item label="密码" prop="pass">
                                        <el-input class="input" type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                                    </el-form-item>
                                </el-form>
                                <section>
                                    <span class="fl">注册登录</span><span class="fr">忘记密码？</span>
                                </section>

                            </el-tab-pane>
                        </el-tabs>

                        <!--<ul class="clearfix">-->
                            <!--<li class=" fl"  @click="codeClick">-->
                                <!--扫码登录-->
                            <!--</li>-->
                            <!--<li class="fl ml20" >账号登录</li>-->
                        <!--</ul>-->
                        <!--<div id="login-container">二维码</div>-->
                    </template>

                </section>

            </section>
        </section>

        <section class="popup-box p-absolute" v-show="show">
            <section class="pop-up">
                <div>绑定手机<br/>为了您更好的体验，需要绑定手机号</div>

                <div class="mt20">
                    <el-input type="text" class="input" id="phone" auto-complete="off" v-model="phoneNumber" placeholder="请输入手机号">
                        2222
                    </el-input>
                    <el-button class="button" id="button" @click="togetCode">
                        获取验证码
                    </el-button>
                    <div class="mt20">
                        <el-input type="text" class="sinput" v-model="verifyCode" v-focus="focusStatus" placeholder="请输入验证码">
                        </el-input>
                    </div>
                    <el-button style="margin-top: 12px;" @click="doLogoin">登录</el-button>
                </div>

            </section>
        </section>


    </section>

</template>

<script>

	import qs from 'qs'

	export default{
		data: function(){
			var validateMobile = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入账号名称'));
				}
			};
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				}
			};
			return {
				activeName: 'first',
				phoneNumber: '',
				phoneNumbers: [],
				verifyCode: '',
				verifyCode1:'',
				show: false,
				ruleForm:{
					mobile:'',
                    pass:''
                },
				rules:{
					mobile:[
						{validator:validateMobile, trigger: 'blur' },
                    ],
					pass: [
						{ validator: validatePass, trigger: 'blur' }
					]
                },
                msg:'请输入手机号',
                msg1:'验证码输入错误',
                appid:'',
				state:''

            }
		},
		mixins: [mixinMethods],
		methods: {
			handleClick(tab, event) {
//				console.log(tab, event);
			},
			codeClick(){
				console.log(22);
				let self = this;
				axios.post('/com/member/getLoginInfo').then( (res) => {
					var d = res.data;
					console.log(d);
//					self.appid = d.data.AppID;
//					self.state = d.data.State;
//					console.log(self.appid);
//					if(res.flag == 1){
//					}else{
////						this.$message.error(res.msg);
//					}
				});
				var obj = new WxLogin
				({
					id:"login_container",//div的id
					appid: self.appid,
					scope: "snsapi_login",//写死
					redirect_uri:encodeURI("你的处理扫码事件的方法") ,
					state: self.state,
					style: "black",//二维码黑白风格
//		href: "https://某个域名下的css文件"
				});
				console.log(code);
            },
			submitForm(ruleForm) {
//				let mobile = this.ruleForm.mobile;
//				if(!(/^1[34578]\d{9}$/.test(mobile))){
//					alert("手机号码有误，请重填");
//					mobile = '';
//					return false;
//				}
				this.$refs[ruleForm].validate((valid) => {
					if (valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
				axios.post('/com/member/accountLogin', qs.stringify({
					mobile : this.ruleForm.mobile,
					password : this.ruleForm.pass,
                })).then( (res) => {
                	console.log(1111);
					console.log(this.ruleForm.mobile,);
                    var d = res.data;
                    if(d.flag == 1){
                    	console.log(d);
                    }else{
                    	this.$message.error(res.data.msg);
                    }
                })
			},
			togetCode:function(){
				let self = this;
				let phone = self.phoneNumber;
				if(!phone){
					alert("请输入手机号");
				}else{
					if(!(/^1[34578]\d{9}$/.test(phone))){
						alert("手机号码有误，请重填");
						self.phoneNumber = '';
						return false;
					}else{
						let button = document.getElementById('button');
						timeGo(button);
					axios.post('/xxx', qs.stringify({})).then( (res) => {
//						var d = res.data;
//						let verifyCode1 = d.data.verifyCode;//请求接口获取验证码
						self.verifyCode1 = Number('8345');
						self.phoneNumbers = ['13526543425','15625365243'];//请求接口获取手机号数组
						console.log(self.verifyCode1);

					} )
					}
				}
			},
			doLogoin(){
                let self = this;
                let phone = self.phoneNumber;
                let verifyCode = self.verifyCode;
                if(!phone){
					this.$message.error(self.msg);
//                    alert("请输入手机号");
                    return false;
                }
                if(!verifyCode){
                    alert("请输入验证码");
                }else{
					if(self.verifyCode1 == self.verifyCode){
						if(self.phoneNumbers.indexOf(self.phoneNumber)<0){
							this.$alert('您还不是企业用户，请完成注册之后再登陆', '温馨提示', {
								confirmButtonText: '确定',
								callback: action => {
									this.$message({
										type: 'info',
										message: `action: ${ action }`
									});
								}
							});
							self.verifyCode = '';
							self.show = false;
                        }else{
							location.assign('http://fel.sass.com:9600/')
                        }
					}else{
						this.$message.error(self.msg1);
						self.verifyCode = '';
					}
                }
            },



//            获取appid和state
            getAuthorInfo(){
				axios.post('/com/member/getLoginConfig').then( (res) => {
                    var d = res.data;
                    if(d.flag == 1){
                    	alert('2222')
                    	console.log(d);
                    }else{
                    	this.$message.error(d.msg);
                    }
                } );
            },
		},
		mounted: function(){

			this.getAuthorInfo();

			/*axios.post('/xxx', qs.stringify({})).then( (res) => {
                var d = res.data;
                if(d.flag == 1){
                }
            } )*/
		}
	}


function wxlogin(appid1,state1){
	var obj = new WxLogin
	({
		id:"login_container",//div的id
		appid: appid1,
		scope: "snsapi_login",//
		redirect_uri:encodeURI("你的处理扫码事件的方法") ,
		state: state1,
		style: "black",//二维码黑白风格
//		href: "https://某个域名下的css文件"
	});
	console.log(code);
}

	function timeGo(element){
		var num = 60
		var timer = setInterval(function () {
			num--
			element.innerHTML = num + '秒后重新获取'
			element.style.color = ' #ccc'
			element.disabled = ' disabled'
			if (num === 0) {
				element.disabled = ''
				element.style.color = ' #fff'
				element.innerHTML = '获取验证码'
				clearInterval(timer)
			}
		}, 1000)
	}

</script>